<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
Blob 全称：Binary Large Object （二进制大型对象）。
Blob 对象表示一个二进制文件的数据内容，通常用来读写文件，比如一个图片文件的内容就可以通过 Blob 对象读写。
与 ArrayBuffer 区别：
  Blob 用于操作二进制文件
  ArrayBuffer 用于操作内存
-->

<body>
  <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)" />
  <!-- https://www.bookstack.cn/read/javascript-tutorial/docs-bom-arraybuffer.md -->
  <!-- https://juejin.cn/post/6844904022206332941#heading-10 -->
  <!-- https://juejin.cn/search?query=Blob%E5%AF%B9%E8%B1%A1&type=all -->
</body>
<script>
  "use strict"; {
    // 1获取文件信息
    let fileinfo = (files) => {
      console.log(files);
      for (var i = 0; i < files.length; i++) {
        var f = files[i];
        console.log(
          f.name, // 文件名，不含路径
          f.size, // 文件大小，Blob 实例属性
          f.type, // 文件类型，Blob 实例属性
          f.lastModifiedDate // 文件的最后修改时间
        );
      }
    };
  }; {
    // 2下载文件
    // 在 AJAX 请求中，指定 responseType 属性为 blob ，皆可以下下载一个 Blob 对象。
    let getBlob = (url, callback) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        // xhr.response 拿到的就是一个 Blob 对象。
        callback(xhr.response);
      }
      xhr.send(null);
    };
    // 3URL对象
    // 浏览器允许使用 URL.createObjectURL() 方法，针对 Blob 对象生成一个临时URL，以便于某些 API 使用。
    const droptarget = document.getElementById('droptarget');
    droptarget.ondrop = function (e) {
      const files = e.dataTransfer.files;
      for (let i = 0; i < files.length; i++) {
        let type = files[i].type;
        if (type.substring(0, 6) !== 'image/')
          continue;
        let img = document.createElement('img');
        img.src = URL.createObjectURL(files[i]);
        img.onload = function () {
          this.width = 100;
          document.body.appendChild(this);
          URL.revokeObjectURL(this.src);
        }
      }
    }
    // 4读取文件
    // HTML 代码如下
    // <input type='file' onchange='readfile(this.files[0])'></input>
    // <pre id='output'></pre>
    function readfile(f) {
      let reader = new FileReader();
      reader.readAsText(f);
      reader.onload = function () {
        let text = reader.result;
        let out = document.getElementById('output');
        out.innerHTML = '';
        out.appendChild(document.createTextNode(text));
      }
      reader.onerror = function (e) {
        console.log('Error', e);
      };
    }
  };
</script>

</html>